<template>
  <div class="table-page">
    <a-form label-align="right" layout="inline" size="small" auto-label-width :model="form" class="form my-10">
      <a-form-item field="name" label="菜单名称">
        <a-input v-model="form.name" placeholder="请输入菜单名称" />
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" @click="getTableData">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button @click="onReset">
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <Gi-table
      row-key="id"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      v-model:columns="columns"
      :pagination="false"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增菜单</span>
        </a-button>
      </template>
      <template #icon="{ record }">
        <span v-if="!record.icon">--</span>
        <component v-else :size="16" :is="record.icon" />
      </template>
      <template #SVG="{ record }">
        <span v-if="!record.extend.svgIcon">--</span>
        <GiSvgIcon v-else :name="record.extend.svgIcon" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="text" @click="onAddOrEdit(record)" size="small">
            <span>编辑</span>
          </a-button>
          <a-popconfirm type="error" content="您确定要删除该菜单吗?" @ok="onDelete(record.id)">
            <a-button type="text" size="small">
              <span>删除</span>
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </Gi-table>
    <EditMenuModal ref="EditMenuModalRef" :menuData="tableData" @getTableData="getTableData"></EditMenuModal>
  </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import { getMenu, menuDelete } from '@/apis'
import EditMenuModal from './EditMenuModal.vue'

defineOptions({ name: 'menus' })

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'extend.title'
  },
  {
    title: '路由',
    dataIndex: 'name'
  },
  {
    title: '路径',
    dataIndex: 'uri'
  },
  {
    title: '项目',
    dataIndex: 'guard_name'
  },
  {
    title: '图标',
    slotName: 'icon'
  },
  {
    title: 'SVG图标',
    slotName: 'SVG'
  },
  {
    title: '排序',
    dataIndex: 'sequence'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]

const EditMenuModalRef = ref()
const loading = ref(false)
const tableData = ref([])

const form = reactive({
  name: ''
})

const getTableData = async () => {
  try {
    loading.value = true
    const res = await getMenu(form)
    tableData.value = res.data
    recursionMenu(tableData.value)
  } finally {
    loading.value = false
  }
}
getTableData()

const recursionMenu = (menu) => {
  menu.forEach((item, index) => {
    if (menu[index].extend && JSON.stringify(menu[index].extend) !== '[]' && typeof menu[index].extend === 'string') {
      menu[index].extend = JSON.parse(menu[index].extend)
    }
    if (menu[index].children && menu[index].children.length) {
      recursionMenu(menu[index].children)
    }
  })
}

//新增/编辑
const onAddOrEdit = (item) => {
  EditMenuModalRef.value?.addOrEdit(item)
}

// 删除
const onDelete = async (id) => {
  try {
    loading.value = true
    const res = await menuDelete({ id })
    Message.success(res.message)
    getTableData()
  } finally {
    loading.value = false
  }
}

// 重置查询
const onReset = () => {
  form.name = ''
  getTableData()
}
</script>
